<template>
  <!-- 1数学几何计算/1三维向量Vector3/ -->
  <div @click="clickObj" id="webgl" class="main"></div>
  <div id="tag"></div>
</template>
<script setup>
import { onMounted } from "vue";
import { renderer, labelRenderer } from "./RenderLoop.js";
import { choose } from "./choose.js";
import { camera } from "./RendererCamera.js";

window.onresize = function () {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  labelRenderer.setSize(width, height);
  camera.aspect = width / height;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
};
const clickObj = (event) => {
  choose(event);
};
onMounted(() => {
  document.getElementById("webgl").appendChild(renderer.domElement);
  document.getElementById("webgl").appendChild(labelRenderer.domElement);
});
</script>
<style scoped>
#tag {
  box-shadow: 0 0 2px #00ffff inset;
  background: linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) right bottom,
    linear-gradient(#00ffff, #00ffff) right bottom;
  background-repeat: no-repeat;
  background-size: 1px 6px, 6px 1px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 16px;
  padding: 4px 10px;
  display: none;
}
</style>